<template>
	<view class="content">
		<view class="userInfo">
			<view class="userimg" @click="setToux">
				<image class="toux" :src="Info.userImg"></image>
				<image class="naoz" :src="getImg('dj-icon-pz.png')"></image>
			</view>
			<view class="user">
				<view class="name">昵称</view>
				<input type="text" v-model="Info.realName" />
			</view>
			<view class="submit" @click="save">确 认 保 存</view>
		</view>
		<view class="tuichu" @click="zuxiao">退 出 登 录</view>
	</view>
</template>

<script>
	import web from '../../components/utils/request.js'
	export default{
		props:['userInfo'],
		data(){
			return{
				Info:[]
			}
		},
		onLoad() {
			
		},
		mounted() {
			this.Info=this.userInfo;
		},
		onReady() {
			// this.getInfo();
		},
		methods:{
			zuxiao(){//退出登录
				var that=this;
				uni.showModal({
					title: '',
					content: '是否退出登录',
					showCancel: true,
					cancelText: '取消',
					confirmText: '退出',
					success: res => {
						if(res.confirm){
							that.$emit('ishide',false)
						}
					}
				});
			},
			getImg(url){
				return 'https://hshd.tour-ma.com/r/cms/www/weifang/ximg/'+url;
			},
			save(){
				this.$emit('ishide',false)
			},
			setToux(){
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						var that=this;
				        uni.uploadFile({
				            url: 'https://hshd.tour-ma.com/wx/imgUpload.jspx', //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'uploadFile',
				            formData: {
				                'wx': 'wx'
				            },
				            success: (uploadFileRes) => {
								var tmp=JSON.parse(uploadFileRes.data);
								that.Info.userImg='https://hshd.tour-ma.com'+tmp.data
				            }
				        });
				    }
				});
			},
			getInfo(){
				var url='/app/userinfo.jspx';
				var arg = {};
				var that = this;
				web.httpPost(that, url, arg, function(res) {	
					if (200 == res.data.status) {
						that.Info=[];
						var tmp=res.data.data;
						that.Info=tmp;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.tuichu{
		width: 750upx;
		height: 100upx;
		background: #FFFFFF;
		font-size: 28upx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 100upx;
		text-align: center;
		margin-top: 30upx;
	}
	.header_shadow{
		box-shadow: 0 0 0 !important;
	}
	.submit{
		width: 630upx;
		height: 81upx;
		line-height: 81upx;
		text-align: center;
		background: #0195ff;
		border-radius: 8upx;
		margin-top: 100upx;
		font-size: 28upx;
		color: #fff;
	}
	.userInfo{
		width: 750upx;
		position: relative;
		top: 0upx;
		height: 70vh;
		background: #fff;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		.userimg{
			margin-top: 50upx;
			width: 202upx;
			height: 202upx;
			background: #DADADA;
			border-radius: 50%;
			position: relative;
			.toux{
				width: 202upx;
				height: 202upx;
				border-radius: 50%;
			}
			.naoz{
				width: 50upx;
				height: 50upx;
				position: absolute;
				bottom: 0;
				right: 15upx;
			}
		}
		.user{
			width: 630upx;
			border-bottom: 2upx solid #CBCBCB;
			height: 70upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			line-height: 70upx;
			margin-top: 110upx;
			.name{
				font-size: 28upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #666666;
			}
			input{
				font-size: 32upx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #0195ff;
				text-align: right;
				height: 100%;
				line-height: 70upx;
			}
			.guanli{
				font-size: 26upx;
				color: #0195ff;
				margin-top: 20upx;
			}
		}
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
		background: #F8F8F8;
	}
</style>
